<template>
  <div>
    <div class="advancde">
      <Logo :collapse="isCollapse" />
      <navbar @Deleteres="Deleteres" />
    </div>
    <div class="Breadcrumbs">
      <Breadcrumb @Deleteres="Deleteres" />
    </div>
    <div v-if="patent_list.length <= 0">
      <el-main class="left">
        <el-row :gutter="12">
          <el-col :span="19">
            <el-col :xl="7" :lg="8">
              <el-select @change="changs" v-model="leng[0].select" style="width: 100%" placeholder="主要字段">
                <el-option v-for="item in data.fields" :key="item" :label="item" :value="item">
                </el-option>
              </el-select>
            </el-col>
            <el-col :xl="12" :lg="16">
              <el-input @input="changInpnut(0)" v-model="leng[0].input" placeholder="可输入关键词，公司名称或者专利号"></el-input>
            </el-col>
          </el-col>
          <el-col v-for="(len, index) in num" :key="index" :span="19">
            <el-col :xl="2" :lg="3">
              <el-select @change="changs2" v-model="leng[index + 1].name" placeholder="AND">
                <el-option v-for="item in data.exp" :key="item" :label="item" :value="item">
                </el-option>
              </el-select>
            </el-col>
            <el-col :xl="5" :lg="5">
              <el-select @change="changs3" v-model="leng[index + 1].select" style="width: 100%"
                placeholder="[全字段]申请(专利权)人">
                <el-option v-for="item in data.fields" :key="item" :label="item" :value="item">
                </el-option>
              </el-select>
            </el-col>
            <el-col :xl="12" :lg="16">
              <el-input @input="changInpnut2(index + 1)" v-model="leng[index + 1].input" placeholder="例如：华为OR中心">
              </el-input>
            </el-col>
          </el-col>
          <el-col :span="19">
            <el-col :xl="6" :lg="6">
              <el-button v-if="num < 9" @click="addNum" style="width: 100%; background-color: #f2f3f5">+添加字段</el-button>
            </el-col>
          </el-col>
          <el-col :span="19">
            <el-col :xl="19" :lg="24">
              <el-input type="textarea" :rows="2" placeholder="在上方字段中输入检索词，在此处预览您的检索式" v-model="exp">
              </el-input>
            </el-col>
          </el-col>
          <el-col>
            <el-col :span="4" style="margin-bottom: 50px;">
              <el-select v-model="lssc" placeholder="请选择当前权利状态" clearable>
                <el-option v-for="item in lsscOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>

            <el-col :span="4">
              <el-select v-model="pdt" placeholder="请选择专利类型" clearable>
                <el-option v-for="item in pdtOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-col>
          <el-col :span="19">
            <el-col :xl="5" :lg="12">
              <el-button @click="emty" style="width: 100px; background-color: #909cb2; color: #fff">清空</el-button>
              <el-button @click="Clickexpers" style="width: 100px; background-color: #45a321; color: #fff">搜索
              </el-button>
            </el-col>
          </el-col>
        </el-row>
      </el-main>
    </div>
    <div v-else class="ListBox">
      <el-row :gutter="24">
        <el-col :span="3" style="margin-bottom: 20px;">
          <el-select v-model="lssc" placeholder="请选择当前权利状态" @change="Clickexpers" clearable>
            <el-option v-for="item in lsscOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>

        <el-col :span="3">
          <el-select v-model="pdt" placeholder="请选择专利类型" @change="Clickexpers" clearable>
            <el-option v-for="item in pdtOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>

        <el-col :span="3">
          <el-select v-model="sort_column" placeholder="请选择排序" @change="Clickexpers" clearable>
            <el-option v-for="item in columnOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-table @row-click="rowClick" :data="patent_list" border>
        <el-table-column prop="ano" align="center" width="150" label="缩略图">
          <template slot-scope="scope">
            <div style="display: flex;justify-content: center;">
              <img v-if="scope.row.imgo != '暂无数据'" :src="scope.row.imgo" alt=""
                style="width: 100px; height: 100px; margin-right: 10px;">
              <div v-else>{{ scope.row.imgo }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="pns" align="center" label="公开(公告)号" width="180">
        </el-table-column>
        <el-table-column prop="tic" align="center" label="专利标题" width="180">
        </el-table-column>
        <el-table-column align="center" label="当前权利状态">
          <template slot-scope="scope">
            <el-tag style="border: none" size="small" effect="dark" color="#3F7FEF" v-if="scope.row.status == '有效'">{{
              scope.row.status
            }}</el-tag>
            <el-tag style="border: none" size="small" effect="dark" color="#F7B219" v-if="scope.row.status == '在审'">{{
              scope.row.status
            }}</el-tag>
            <el-tag style="border: none" size="small" effect="dark" color="#33BF92" v-if="scope.row.status == '无效'">{{
              scope.row.status
            }}</el-tag>
            <!--  <el-tag style="border:none;"  size="small" effect="dark" color="#4ba22f" v-if="scope.row.status == '部分无效'" >{{scope.row.status}}</el-tag>
              <el-tag style="border:none;"  size="small" effect="dark" color="#4ba22f" v-if="scope.row.status == '权利恢复'" >{{scope.row.status}}</el-tag>
              <el-tag style="border:none;"  size="small" effect="dark" color="#6c778b" v-if="scope.row.status == '未缴年费'" >{{scope.row.status}}</el-tag>
              <el-tag style="border:none;"  size="small" effect="dark" color="#6c778b" v-if="scope.row.status == '撤回'" >{{scope.row.status}}</el-tag>
              <el-tag style="border:none;"  size="small" effect="dark" color="#6c778b" v-if="scope.row.status == '驳回'" >{{scope.row.status}}</el-tag>
              <el-tag style="border:none;"  size="small" effect="dark" color="#6c778b" v-if="scope.row.status == '期限届满'" >{{scope.row.status}}</el-tag>
              <el-tag style="border:none;"  size="small" effect="dark" color="#6c778b" v-if="scope.row.status == '避重授权'" >{{scope.row.status}}</el-tag>
              <el-tag style="border:none;"  size="small" effect="dark" color="#6c778b" v-if="scope.row.status == '全部撤销'" >{{scope.row.status}}</el-tag>
              <el-tag style="border:none;"  size="small" effect="dark" color="#da7b21" v-if="scope.row.status == '实质审查'" >{{scope.row.status}}</el-tag>
              <el-tag style="border:none;"  size="small" effect="dark" color="#da7b21" v-if="scope.row.status == '公开'" >{{scope.row.status}}</el-tag>
              <el-tag style="height:25px;line-height:25px; margin-right:5px;margin-bottom:5px;" size="small" v-for="(t,s) in scope.row.event" :key="s" v-if="scope.row.event.length > 0" effect="plain" type="">{{t}}</el-tag> -->
          </template>
        </el-table-column>
        <el-table-column prop="pdt" align="center" label="专利类型">
        </el-table-column>
        <el-table-column prop="inc" align="center" label="发明人">
        </el-table-column>
        <el-table-column prop="ad" align="center" label="申请日">
        </el-table-column>
        <el-table-column prop="pd" align="center" label="公告(公开)日">
        </el-table-column>
        <el-table-column prop="ano" align="center" label="申请号">
        </el-table-column>
        <el-table-column prop="crc" align="center" label="代理机构">
        </el-table-column>
      </el-table>
      <div class="pagination" style="width: 90%; margin: 40px auto">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="list.page" :page-size="list.size" layout="total, prev, pager, next, jumper"
          :total="Number(parseInt(list.total))" align="left"></el-pagination>
      </div>
    </div>
    <Service v-if="this.$route.meta.serve" />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { fields, expression, getExpression } from "@/api/user";
import Navbar from "@/layout/components/Navbar";
import Logo from "@/layout/components/Sidebar/Logo";
import Breadcrumb from "@/components/Breadcrumb";
import Service from "@/components/Service";
export default {
  components: {
    Navbar,
    Logo,
    Breadcrumb,
    Service,
  },
  data() {
    return {
      data: [],
      num: 3,
      leng: [
        {
          name: "AND",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
      ],
      lssc: '',
      lsscOptions: [
        { value: '1', label: '有效' },
        { value: '2', label: '无效' },
        { value: '3', label: '在审' },
        { value: '8', label: '不影响' },
        { value: '9', label: '不确定/待定' },
      ],
      pdt: "",
      pdtOptions: [
        { value: '发明', label: '发明' },
        { value: '实用新型', label: '实用新型' },
        { value: '外观设计', label: '外观设计' },
      ],
      columnOptions: [
        { value: '-AD', label: '申请日从新到旧' },
        { value: '+AD', label: '申请日从旧到新' },
        { value: '-PD', label: '公开日从新到旧' },
        { value: '+PD', label: '公开日从旧到新' },
      ],
      input: "",
      textarea: "",
      check: "",
      sort_column: "-AD",
      exp: sessionStorage.getItem('exp') ? sessionStorage.getItem('exp') : "",
      patent_list: [],
      list: [],
      page: sessionStorage.getItem('list_page') ? Number(sessionStorage.getItem('list_page')) : 1
    };
  },
  computed: {
    ...mapGetters(["sidebar"]),
    isCollapse() {
      return !this.sidebar.opened;
    },
  },
  async mounted() {
    try {
      this.data = await fields();
      if (this.exp !== "") {
        this.handleCurrentChange(this.page)
      }

      this.leng = sessionStorage.getItem('leng') ? JSON.parse(sessionStorage.getItem('leng')) : this.leng
      // console.log(this.data, JSON.parse(sessionStorage.getItem('leng')));
    } catch (e) {
      this.$message.error(e.message);
    }
  },
  methods: {
    emty() {
      this.exp = "";
      this.lssc = "";
      this.pdt = "";
      this.sort_column = "";
      this.leng = [
        {
          name: "AND",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
        {
          name: "",
          select: "",
          input: "",
        },
      ];
    },
    async changs(val) {
      try {
        const res = await getExpression({ field: this.leng });
        this.exp = res.text;
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    async changs2(val) {
      try {
        const res = await getExpression({ field: this.leng });
        this.exp = res.text;
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    async changs3(val) {
      try {
        const res = await getExpression({ field: this.leng });
        this.exp = res.text;
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    async changInpnut(index) {
      try {
        if (this.leng[index].select) {
          const res = await getExpression({ field: this.leng });
          this.exp = res.text;
        }
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    async changInpnut2(index) {
      try {
        if (this.leng[index + 1]) {
          const res = await getExpression({ field: this.leng });
          this.exp = res.text;
        }
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    addNum() {
      this.num++;
    },
    Deleteres() {
      this.patent_list = ''
      this.list = ''
    },
    async Clickexpers() {
      try {
        // exp
        if (this.exp) {
          const res = await expression({
            exp: this.exp,
            lssc: this.lssc,
            pdt: this.pdt,
            sort_column: this.sort_column
          });
          // console.log(res, 'res')
          if (res == "") {
            throw new Error("暂无数据");
          } else {
            this.patent_list = res.patent_list;
            this.list = res.page;
            if (res.page.total >= 10000) {
              this.list.total = 10000
            }
          }
        } else {
          throw new Error("请填写检索词");
        }
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    rowClick(row) {
      sessionStorage.setItem("pc", 0)
      sessionStorage.setItem("leng", JSON.stringify(this.leng))
      sessionStorage.setItem("exp", this.exp)
      // sessionStorage.setItem("list", JSon.stringify(this.list))
      sessionStorage.setItem("list_page", this.page)
      // console.log(row, this.list)
      this.$router.push({
        path: "/detail",
        query: { pid: row.pid, ano: row.ano },
      });

    },
    //每页下拉显示数据
    async handleSizeChange(size) {
      try {
        const res = await expression({
          page: size,
          exp: this.exp,
          lssc: this.lssc,
          pdt: this.pdt,
          sort_column: this.sort_column
        });
        if (res == "") {
          throw new Error("暂无数据");
        } else {
          this.patent_list = res.patent_list;
          this.list = res.page;
          if (res.page.total >= 10000) {
            this.list.total = 10000
          }
        }
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    //点击第几页
    async handleCurrentChange(currentPage) {
      try {
        const res = await expression({
          page: currentPage,
          exp: this.exp,
          lssc: this.lssc,
          pdt: this.pdt,
          sort_column: this.sort_column
        });
        if (res == "") {
          throw new Error("暂无数据");
        } else {
          this.patent_list = res.patent_list;
          this.list = res.page;
          this.page = currentPage
          if (res.page.total >= 10000) {
            this.list.total = 10000
          }
        }
      } catch (e) {
        this.$message.error(e.message);
      }
    },
  },
};
</script>

<style scoped lang="less">
.advancde {
  display: flex;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.ListBox {
  margin: 40px 200px
}

.navbar {
  width: 100%;
  box-shadow: none;
}

.sidebar-logo-container {
  width: 20%;
}

.Breadcrumbs {
  padding-left: 417px;
  margin-left: 0 !important;
  margin-top: 0 !important;
  background-color: #f4f5f7;
}

.left {
  margin-left: 400px;
}

.el-col-19 {
  margin-bottom: 20px;
}

@media (max-width: 1360px) {
  .Breadcrumbs {
    padding-left: 320px;
  }

  .left {
    margin-left: 300px;
  }
}

@media (max-width: 750px) {
  .v_span2 {
    display: block;
  }

  .mb_zy {
    margin-bottom: 10px !important;
  }

  .Breadcrumbs,
  .NavItem,
  .Header,
  .service {
    display: none;
  }

  .main-top {
    width: 100%;
    margin-left: 0 !important;
    padding-bottom: 0;
    top: 0;
  }

  .pc {
    display: none;
  }

  .mb {
    display: block;
  }

  .detail_info_title {
    margin: 15px 0;
  }

  .detail_info_last {
    margin: 15px 0;
  }

  .infos {
    margin: 10px 0 0 0;
  }

  .detail_info {
    margin-bottom: 30px;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    width: 100%;
  }

  .detail_info_first_box {
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
  }

  .detail_head_title {
    width: auto;
  }

  .img-box {
    width: 100%;
  }

  .abst__layout-row {
    flex-direction: column;
  }

  .mb_top {
    margin-top: 20px;
  }

  .mb_context {
    font-weight: bold;
    margin-bottom: 10px;
    width: 100% !important;
  }

  .v_span2 {
    padding-left: 0;
  }

  .tio {
    line-height: 1.3;
  }

  .icon-tog {
    text-align: center;
    display: inline-block;
    line-height: 46px;
  }

  .icon-toggle {
    font-size: 25px !important;
  }

  .title_pns {
    border-bottom: 1px solid #c8d0dc;
    padding-bottom: 10px;
  }

  .transition-box {
    position: fixed;
    right: 0;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 9;
    background-color: rgba(0, 0, 0, 0.3);
  }

  .el-zoom-in-top {
    position: fixed;
    width: 80%;
    height: 100%;
    margin: 0 auto;
    background-color: #fff;
    top: 0;
    right: 0;
    z-index: 10;
  }

  .mb_nav_li {
    margin: 30px auto;
  }

  .mb_nav_li li {
    margin-top: 20px;
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
  }

  .close {
    float: right;
    padding: 10px;

    .iconfont {
      font-size: 25px;

    }
  }
}
</style>
